<template>
	<view class="container">
		<TopNavBar backgroundImage="../../static/logo_top.jpg" :navHeight="100" backgroundColor="#fdf2f6"
			showMode="auto" />

		<!-- 主计时器区域 -->
		<view class="timer-card card">
			<text class="timer-label">{{ selectedTask ? selectedTask.name : '未选择任务' }}</text>
			<text class="timer-display">{{ formatTime(currentTime) }}</text>
			<view class="timer-controls">
				<view class="control-button primary" @tap="toggleTimer">
					<text class="iconfont" :class="isRunning ? 'icon-pause' : 'icon-play'">
						{{ isRunning ? '&#xe6a4;' : '&#xe6a5;' }}
					</text>
				</view>
				<view class="control-button secondary" @tap="resetTimer">
					<text class="iconfont icon-reset">&#xe8ba;</text>
				</view>
			</view>
		</view>

		<!-- 任务列表区域 -->
		<view class="task-section">
			<view class="section-header">
				<text class="section-title">任务列表</text>
				<view class="add-button" @tap="showAddTask">
					<text class="iconfont icon-plus">&#xe6b9;</text>
					<text>添加任务</text>
				</view>
			</view>

			<view class="task-list">
				<view v-for="task in tasks" :key="task.id" class="task-item"
					:class="{ 'task-selected': selectedTask && selectedTask.id === task.id }" @tap="selectTask(task)">
					<view class="task-info">
						<text class="task-name">{{ task.name }}</text>
						<text class="task-time">剩余时间: {{ formatTime(task.timeLeft) }}</text>
					</view>
					<view class="task-actions">
						<text class="iconfont icon-edit" @tap.stop="editTask(task)">&#xe6a6;</text>
						<text class="iconfont icon-delete" @tap.stop="deleteTask(task)">&#xe6a7;</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部工具栏 -->
		<view class="footer">
			<text class="task-count">共 {{ tasks.length }} 个任务</text>
			<view class="footer-actions">
				<view class="footer-button" @tap="showSortOptions">
					<text class="iconfont icon-sort">&#xe6a8;</text>
					<text>排序</text>
				</view>
				<view class="footer-button" @tap="showBatchManage">
					<text class="iconfont icon-list">&#xe6a9;</text>
					<text>批量管理</text>
				</view>
			</view>
		</view>

		<!-- 添加任务弹窗 -->
		<uni-popup ref="addTaskPopup" type="center">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">添加新任务</text>
					<text class="popup-close" @tap="hideAddTask">×</text>
				</view>
				<view class="popup-body">
					<view class="input-group">
						<text class="input-label">任务名称</text>
						<input class="input" v-model="newTask.name" placeholder="请输入任务名称" />
					</view>
					<view class="input-group">
						<text class="input-label">时长（分钟）</text>
						<input class="input" type="number" v-model="newTask.duration" placeholder="请输入时长" />
					</view>
					<button class="confirm-button" @tap="addTask">确认添加</button>
				</view>
			</view>
		</uni-popup>
		<tabbar @choseTabbarMethod="choseTabbarMethod"></tabbar>
	</view>
</template>

<script>
	import TopNavBar from '@/components/topNavigationBar/topNavigationBar.vue';
	import tabbar from '@/components/tabbar/tabbar.vue';
	import {
		allData
	} from "../../utils/allData.js";
	export default {
		components: {
			TopNavBar,
			tabbar
		},
		data() {
			return {
				tasks: [],
				selectedTask: null,
				currentTime: 0,
				isRunning: false,
				timer: null,
				newTask: {
					name: '',
					duration: ''
				},
				choseTabbar: 0
			}
		},
		onLoad() {
			console.log(allData, 'allData');
			this.tasks = allData
		},
		methods: {
			choseTabbarMethod(e) {
				console.log(e, '~~~~');

			},
			formatTime(seconds) {
				const h = Math.floor(seconds / 3600)
				const m = Math.floor((seconds % 3600) / 60)
				const s = seconds % 60
				return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
			},
			selectTask(task) {
				this.selectedTask = task
				this.currentTime = task.timeLeft
				if (this.isRunning) {
					this.stopTimer()
				}
			},
			toggleTimer() {
				if (!this.selectedTask) {
					uni.showToast({
						title: '请先选择任务',
						icon: 'none'
					})
					return
				}

				if (this.isRunning) {
					this.stopTimer()
				} else {
					this.startTimer()
				}
			},
			startTimer() {
				this.isRunning = true
				this.timer = setInterval(() => {
					if (this.currentTime > 0) {
						this.currentTime--
						this.selectedTask.timeLeft = this.currentTime
					} else {
						this.stopTimer()
						uni.showToast({
							title: '任务完成！',
							icon: 'success'
						})
					}
				}, 1000)
			},
			stopTimer() {
				this.isRunning = false
				clearInterval(this.timer)
			},
			resetTimer() {
				if (!this.selectedTask) {
					uni.showToast({
						title: '请先选择任务',
						icon: 'none'
					})
					return
				}
				this.stopTimer()
				this.currentTime = this.selectedTask.duration
				this.selectedTask.timeLeft = this.selectedTask.duration
			},
			showAddTask() {
				this.$refs.addTaskPopup.open()
			},
			hideAddTask() {
				this.$refs.addTaskPopup.close()
				this.newTask = {
					name: '',
					duration: ''
				}
			},
			addTask() {
				if (!this.newTask.name || !this.newTask.duration) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}

				const duration = parseInt(this.newTask.duration) * 60
				const task = {
					id: Date.now().toString(),
					name: this.newTask.name,
					duration,
					timeLeft: duration
				}

				this.tasks.push(task)
				this.hideAddTask()
				uni.showToast({
					title: '添加成功',
					icon: 'success'
				})
			},
			editTask(task) {
				// 编辑任务逻辑
			},
			deleteTask(task) {
				uni.showModal({
					title: '确认删除',
					content: '是否确认删除该任务？',
					success: (res) => {
						if (res.confirm) {
							const index = this.tasks.findIndex(t => t.id === task.id)
							if (index !== -1) {
								this.tasks.splice(index, 1)
								if (this.selectedTask && this.selectedTask.id === task.id) {
									this.selectedTask = null
									this.currentTime = 0
									this.stopTimer()
								}
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
							}
						}
					}
				})
			},
			showSortOptions() {
				// 排序选项逻辑
			},
			showBatchManage() {
				// 批量管理逻辑
			},
			openSettings() {
				// 设置逻辑
			}
		},
		onUnload() {
			this.stopTimer()
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 100rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.settings {
		padding: 10rpx;
	}

	.timer-card {
		margin: 30rpx;
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.timer-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.timer-display {
		font-size: 72rpx;
		font-weight: bold;
		font-family: monospace;
		color: #409EFF;
		margin: 30rpx 0;
	}

	.timer-controls {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 40rpx;
	}

	.control-button {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.control-button.primary {
		background-color: #409EFF;
		color: #ffffff;
	}

	.control-button.secondary {
		background-color: #f5f7fa;
		color: #606266;
	}

	.task-section {
		margin: 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.add-button {
		display: flex;
		align-items: center;
		background-color: #409EFF;
		color: #ffffff;
		padding: 12rpx 24rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.add-button text {
		margin-left: 8rpx;
	}

	.task-list {
		margin-top: 20rpx;
	}

	.task-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.task-selected {
		border: 2rpx solid #409EFF;
		background-color: rgba(64, 158, 255, 0.05);
	}

	.task-info {
		flex: 1;
	}

	.task-name {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.task-time {
		font-size: 24rpx;
		color: #909399;
	}

	.task-actions {
		display: flex;
		gap: 30rpx;
	}

	.task-actions .iconfont {
		font-size: 36rpx;
		color: #909399;
	}

	.task-actions .icon-delete {
		color: #F56C6C;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #EBEEF5;
	}

	.task-count {
		font-size: 24rpx;
		color: #909399;
	}

	.footer-actions {
		display: flex;
		gap: 30rpx;
	}

	.footer-button {
		display: flex;
		align-items: center;
		color: #606266;
		font-size: 24rpx;
	}

	.footer-button .iconfont {
		margin-right: 8rpx;
	}

	.popup-content {
		background-color: #ffffff;
		border-radius: 20rpx;
		width: 600rpx;
	}

	.popup-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #EBEEF5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.popup-close {
		font-size: 40rpx;
		color: #909399;
		padding: 10rpx;
	}

	.popup-body {
		padding: 30rpx;
	}

	.input-group {
		margin-bottom: 20rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 10rpx;
		display: block;
	}

	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #DCDFE6;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.confirm-button {
		margin-top: 30rpx;
		width: 100%;
		height: 80rpx;
		background-color: #409EFF;
		color: #ffffff;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>